import { _decorator, Component, Node } from 'cc';
import BaseView from '../../../../../extensions/gfw3_x/assets/scripts/gfw/mvc/BaseView';
import { SpineAnim } from '../../../../../extensions/gfw3_x/assets/scripts/gfw/component/spine/SpineAnim';
import { Slider } from 'cc';
import { Label } from 'cc';
import { EventTouch } from 'cc';
import RecycleScroll from '../../../../../extensions/gfw3_x/assets/scripts/gfw/component/scrollview/RecycleScroll';
import { SpineAnimItem } from './SpineAnimItem';
import { EditBox } from 'cc';
import { resources } from 'cc';
import { sp } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('SpineAnimTestView')
export class SpineAnimTestView extends BaseView {
    @property(SpineAnim)
    spineAnim: SpineAnim = null;
    @property(RecycleScroll)
    itemScroll: RecycleScroll = null;

    @property(Slider)
    sliderBar: Slider = null;

    @property(EditBox)
    dirInput: EditBox = null;
    @property(EditBox)
    nameInput: EditBox = null;

    @property(Label)
    lblTime: Label = null;
    @property(Label)
    lblCurAnim: Label = null;

    animNameList: string[] = [];
    dirPath: string = `spines/hero/`;
    spineName: string = `character_caiwenji`;
    protected onLoad(): void {
        this.dirInput.string = this.dirPath;
        this.nameInput.string = this.spineName;
    }

    start() {
        this.itemScroll.onItemRender = this.onItemRender.bind(this)
        this.itemScroll.onItemClicked = this.onItemClicked.bind(this)
        this.spineAnim.onSpineAnimUpdate = this.onSpineAnimUpdate.bind(this);
        this.spineAnim.isPlay = true;
        this.animNameList = this.spineAnim.getAnimNameList();
        this.itemScroll.numItems = this.animNameList.length;
        this.updateAnimName();
    }

    onItemRender(index: number, node: Node) {
        const item = node.getComponent(SpineAnimItem);
        const text = this.animNameList[index];
        item.setData({ text });
    }

    onItemClicked(index: number, node: Node) {
        const text = this.animNameList[index];
        this.spineAnim.play(0, text, true);
        this.updateAnimName();
    }

    onSpineAnimUpdate() {
        this.sliderBar.progress = this.spineAnim.getProgress();
        this.lblTime.string = `${this.spineAnim.getTrackTime().toFixed(2)}/${this.spineAnim.getEndTime().toFixed(2)}`
    }

    onSlider() {
        this.spineAnim.setProgress(this.sliderBar.progress);
    }

    onBtnClicked(e: EventTouch, data: string) {
        switch (data) {
            case `0`: {
                this.spineAnim.isPlay = !this.spineAnim.isPlay;
                break;
            }
            case `1`: {
                const path = `${this.dirInput.string}${this.nameInput.string}/${this.nameInput.string}`;
                resources.load(path, sp.SkeletonData, (err: Error, data: sp.SkeletonData) => {
                    if (err) {
                        console.error(err);
                        return;
                    }
                    this.spineAnim.spine.skeletonData = data;
                    this.spineAnim.play(0, `idle`, true);
                })
                break;
            }
        }
    }


    update(deltaTime: number) {

    }

    updateAnimName() {
        this.lblCurAnim.string = `当前动画名: ${this.spineAnim.getAnimName()}`;
    }
}

